<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <!-- <canvas id="my-canvas" width="500" height="400" canvas-id="my-canvas"></canvas> -->
    <canvas
      id="canvas"
      canvas-id="my-canvas"
      :style="{ width: $getStoraged('systemInfo').screenWidth + 'px', height: $getStoraged('systemInfo').screenHeight / 2.22 + 'px' }"
    ></canvas>
    <div class="page regulateJobs">
      <xlNavBar :isShare="isShare" title="管理招聘需求" bgc="ff9d49" :showLeft="true"></xlNavBar>
      <div></div>
      <div class="container">
        <regulateJobsItem v-for="item in myList" :key="item.id" :item="item" @update="getList"></regulateJobsItem>
      </div>
      <!-- 继续添加 -->
      <div class="add-item" @click="addJob">
        <div class="left">
          <div class="add">+</div>
          <div class="info">继续添加招聘需求</div>
        </div>
        <div class="right">
          <div class="info">最多支持添加三个招聘需求</div>
          <image class="icon" src="@/pages2/static/images/right-icon.png" />
        </div>
      </div>
      <div class="bottom_jj" v-if="!hasTop">
        <div class="title">
          <div class="wxts">温馨提示</div>
          <div class="s_title">您可分别针对招聘岗位选择一下措施，提升招聘成功率</div>
        </div>
        <div class="s_title">1.置顶招聘，可更快找到员工</div>
        <div class="images_wrap">
          <image src="@/pages2/static/images/1.png" mode="scaleToFill" />
          <image src="@/pages2/static/images/2.png" mode="scaleToFill" />
          <image src="@/pages2/static/images/3.png" mode="scaleToFill" />
        </div>
        <div class="s_title">2.刷新招聘发布时间，提高岗位排名让更多求职者联系您</div>
      </div>
    </div>
  </page-meta>
</template>

<script>
import regulateJobsItem from "@/pages2/components/job/regulateJobsItem.vue";
export default {
  name: "regulateJobs",
  components: { regulateJobsItem },
  data() {
    return {
      isShare: 0,
      fontsize: "",
      code: "",
      myList: [],
      hasTop: false,
      showContactPopup: false,
    };
  },
  methods: {
    async getList() {
      let res = await this.$http.requestSync("/jobs/my", {}, "GET");
      if (res.code == 200 && res.jobs && res.jobs.length > 0) {
        this.myList = res.jobs.map(item => {
          if (item.is_top) {
            this.hasTop = true;
          }
          return item;
        });
      } else {
        this.myList = [];
        // this.addJob();
      }
    },
    addJob() {
      if (this.myList.length === 3) {
        return this.$layer.message("招聘需求已超过限制，请删除其他招聘");
      }
      this.$togo("/pages2/postOffer");
    },
  },
  async onShareAppMessage(res) {
    let { target } = res;
    let item = target.dataset.info;
    // let imageUrl = await this.$drawPoster({
    //   type: "招聘",
    //   tag: item.positions.split(",") || [item.positions],
    //   desc: item.description,
    //   address: item.address,
    // });
    return {
      title: "招聘：" + item["positions"].split(",") || "",
      path: `/pages2/jobDetail?id=${item.id}&params=${encodeURIComponent(
        JSON.stringify({
          share: 1,
          shareUserId: JSON.parse(uni.getStorageSync("user_id")),
        })
      )}`,
      imageUrl: "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/13_1680789438427854430.eterYuCrlWYubbb1b3348e59dda8aa3997977bb17a78.jpg",
      desc: "",
      content: "",
      success() {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail() {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
  onShow(options) {
    this.getList();
    if (options && options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
};
</script>

<style scoped lang="scss">
.regulateJobs {
  min-height: 100vh;
  background: #f7f7f7;
  box-sizing: border-box;
  display: table;
  .container {
    background: #fff;
    box-sizing: border-box;
    padding: 10px;
  }
  .add-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    line-height: 44px;
    background: #ffffff;
    border-radius: 8px;
    padding: 0 10px;
    margin: 0 10px;
    margin-top: 10px;
    .left {
      display: flex;
      align-items: center;
      .add {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background: #ff8822;
        color: #ffffff;
        font-weight: 600;
      }
      .info {
        margin-left: 4px;
        color: #333333;
        font-weight: 600;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .info {
        font-size: 12px;
        color: #999999;
      }
      .icon {
        margin-right: 6px;
        width: 16px;
        height: 16px;
      }
    }
  }
  .bottom_jj {
    width: 95%;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    margin: 10px auto;
    box-sizing: border-box;
    padding: 10px;
    .title {
      width: 100%;
      height: 70px;
      line-height: 32px;
      border-bottom: 1px solid #e4e4e4;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      .wxts {
        font-size: 16px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }
      .s_title {
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff8822;
        margin: 0px auto 12px;
      }
    }
    .s_title {
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin: 10px auto 15px;
    }
    .images_wrap {
      display: flex;
      justify-content: space-around;
      image {
        width: 103px;
        height: 103px;
      }
    }
    .btn {
      width: 245px;
      height: 40px;
      background: linear-gradient(90deg, #ffa222 0%, #ff8822 100%);
      border-radius: 20px 20px 20px 20px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      margin: 20px auto;
    }
  }
  .footer {
    width: 100%;
    height: 79px;
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    .left {
      width: 192px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .right_btn {
      width: 138px;
      height: 42px;
      background: linear-gradient(122deg, #ffa222 0%, #ff8822 100%);
      border-radius: 21px 21px 21px 21px;
      text-align: center;
      line-height: 42px;
      color: #fff;
    }
  }
}
</style>
